'use client';

import React, { useMemo } from 'react';
import { Breadcrumb } from 'src/components/Breadcrumb';
import { CloudOutlined, FolderOutlined } from '@ant-design/icons';
import { useSearchParams } from 'next/navigation';
import { useRequest } from 'ahooks';
import { getFolderPathById } from 'src/actions/folder';

function FolderBreadcrumbNoMemoized() {
  const searchParams = useSearchParams();

  const folderId = searchParams.get('folderId') ?? undefined;

  const { data, loading } = useRequest(() => getFolderPathById(folderId), {
    refreshDeps: [folderId],
  });

  const items = useMemo(() => {
    const paths =
      data?.map((folder) => ({
        label: folder.name,
        href: `/workbench/gallery?folderId=${folder.id}`,
        icon: <FolderOutlined />,
      })) ?? [];
    const root = {
      href: '/workbench/gallery?folderId=',
      icon: <CloudOutlined />,
      title: '资源管理器',
    };
    return [root, ...paths];
  }, [data]);

  if (loading) {
    return <div className="skeleton h-4 w-28" />;
  }

  return (
    <>
      <Breadcrumb items={items} />
      <div aria-label="divider" className="mx-5 w-[1px] h-5 bg-gray-200 dark:bg-neutral-700" />
    </>
  );
}

export const FolderBreadcrumb = React.memo(FolderBreadcrumbNoMemoized);
